<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>舆情分析系统 - 首页</title>
    <link rel="stylesheet" href="../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../css/common.css">
    <style>
        .container {
            padding: 20px;
            background: #f5f5f5;
            min-height: 100vh;
        }
        
        .page-header {
            background: white;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .page-title {
            font-size: 24px;
            font-weight: bold;
            color: #333;
            margin: 0;
        }
        
        .stats-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .stat-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            text-align: center;
            transition: transform 0.3s ease;
        }
        
        .stat-card:hover {
            transform: translateY(-5px);
        }
        
        .stat-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin: 0 auto 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: white;
        }
        
        .stat-number {
            font-size: 32px;
            font-weight: bold;
            color: #1890ff;
            margin-bottom: 10px;
        }
        
        .stat-label {
            color: #666;
            font-size: 14px;
        }
        
        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .feature-card {
            background: white;
            border-radius: 8px;
            padding: 25px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 20px rgba(0,0,0,0.15);
        }
        
        .feature-header {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .feature-icon {
            width: 50px;
            height: 50px;
            border-radius: 8px;
            margin-right: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: white;
        }
        
        .feature-title {
            font-size: 18px;
            font-weight: bold;
            color: #333;
        }
        
        .feature-desc {
            color: #666;
            line-height: 1.6;
            margin-bottom: 15px;
        }
        
        .feature-stats {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: #999;
        }
        
        .chart-container {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .chart-title {
            font-size: 18px;
            font-weight: bold;
            color: #333;
            margin-bottom: 20px;
        }
        
        .chart-wrapper {
            height: 300px;
        }
        
        .recent-news {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .news-item {
            border-bottom: 1px solid #f0f0f0;
            padding: 15px 0;
        }
        
        .news-item:last-child {
            border-bottom: none;
        }
        
        .news-title {
            font-size: 14px;
            color: #333;
            margin-bottom: 8px;
            cursor: pointer;
        }
        
        .news-title:hover {
            color: #1890ff;
        }
        
        .news-meta {
            display: flex;
            gap: 15px;
            font-size: 12px;
            color: #999;
        }
        
        .loading {
            text-align: center;
            padding: 50px;
            color: #999;
        }
    </style>
</head>
<body>
    <div id="app" class="container">
        <!-- 页面头部 -->
        <div class="page-header">
            <h1 class="page-title">舆情分析系统</h1>
        </div>

        <!-- 统计卡片 -->
        <div class="stats-cards">
            <div class="stat-card">
                <div class="stat-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                    📊
                </div>
                <div class="stat-number">{{ stats.totalArticles }}</div>
                <div class="stat-label">总文章数</div>
            </div>
            <div class="stat-card">
                <div class="stat-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
                    💬
                </div>
                <div class="stat-number">{{ stats.totalComments }}</div>
                <div class="stat-label">总评论数</div>
            </div>
            <div class="stat-card">
                <div class="stat-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
                    🔥
                </div>
                <div class="stat-number">{{ stats.totalHotWords }}</div>
                <div class="stat-label">热词数量</div>
            </div>
            <div class="stat-card">
                <div class="stat-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
                    📈
                </div>
                <div class="stat-number">{{ stats.avgSentiment }}</div>
                <div class="stat-label">平均情感得分</div>
            </div>
        </div>

        <!-- 功能模块 -->
        <div class="feature-grid">
            <div class="feature-card" @click="navigateTo('hot-words')">
                <div class="feature-header">
                    <div class="feature-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                        🔥
                    </div>
                    <div class="feature-title">热词统计</div>
                </div>
                <div class="feature-desc">
                    分析热门关键词的频次、情感分布和趋势变化，帮助了解当前热点话题。
                </div>
                <div class="feature-stats">
                    <span>今日热词: {{ stats.todayHotWords }}</span>
                    <span>更新于: {{ stats.lastUpdate }}</span>
                </div>
            </div>

            <div class="feature-card" @click="navigateTo('platform-stats')">
                <div class="feature-header">
                    <div class="feature-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
                        🌐
                    </div>
                    <div class="feature-title">全平台舆情统计</div>
                </div>
                <div class="feature-desc">
                    跨平台数据整合分析，对比不同平台的舆情特点和用户行为模式。
                </div>
                <div class="feature-stats">
                    <span>监控平台: {{ stats.platformCount }}</span>
                    <span>活跃度: {{ stats.platformActivity }}</span>
                </div>
            </div>

            <div class="feature-card" @click="navigateTo('article-analysis')">
                <div class="feature-header">
                    <div class="feature-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
                        📰
                    </div>
                    <div class="feature-title">文章分析</div>
                </div>
                <div class="feature-desc">
                    深度分析文章内容、情感倾向、传播效果，提供详细的文章质量评估。
                </div>
                <div class="feature-stats">
                    <span>分析文章: {{ stats.analyzedArticles }}</span>
                    <span>准确率: {{ stats.analysisAccuracy }}</span>
                </div>
            </div>

            <div class="feature-card" @click="navigateTo('ip-analysis')">
                <div class="feature-header">
                    <div class="feature-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
                        🌍
                    </div>
                    <div class="feature-title">IP分析</div>
                </div>
                <div class="feature-desc">
                    分析用户IP地理分布、活跃度统计，了解用户地域特征和行为模式。
                </div>
                <div class="feature-stats">
                    <span>覆盖地区: {{ stats.regionCount }}</span>
                    <span>活跃IP: {{ stats.activeIPs }}</span>
                </div>
            </div>

            <div class="feature-card" @click="navigateTo('comment-analysis')">
                <div class="feature-header">
                    <div class="feature-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
                        💭
                    </div>
                    <div class="feature-title">评论分析</div>
                </div>
                <div class="feature-desc">
                    分析用户评论的情感倾向、内容质量，了解用户真实反馈和意见。
                </div>
                <div class="feature-stats">
                    <span>评论数: {{ stats.commentCount }}</span>
                    <span>情感准确率: {{ stats.sentimentAccuracy }}</span>
                </div>
            </div>

            <div class="feature-card" @click="navigateTo('opinion-analysis')">
                <div class="feature-header">
                    <div class="feature-icon" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);">
                        📊
                    </div>
                    <div class="feature-title">舆情分析</div>
                </div>
                <div class="feature-desc">
                    综合舆情风险评估、趋势预测，生成专业的舆情分析报告。
                </div>
                <div class="feature-stats">
                    <span>风险事件: {{ stats.riskEvents }}</span>
                    <span>预警准确率: {{ stats.warningAccuracy }}</span>
                </div>
            </div>

            <div class="feature-card" @click="navigateTo('word-cloud')">
                <div class="feature-header">
                    <div class="feature-icon" style="background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);">
                        ☁️
                    </div>
                    <div class="feature-title">词云图</div>
                </div>
                <div class="feature-desc">
                    可视化展示文章内容关键词，直观呈现热点话题和内容特征。
                </div>
                <div class="feature-stats">
                    <span>词汇数: {{ stats.wordCount }}</span>
                    <span>更新频率: {{ stats.updateFrequency }}</span>
                </div>
            </div>

            <div class="feature-card" @click="navigateTo('ai-chat')">
                <div class="feature-header">
                    <div class="feature-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                        🤖
                    </div>
                    <div class="feature-title">AI对话</div>
                </div>
                <div class="feature-desc">
                    基于DeepSeek等AI模型的智能对话系统，提供专业的舆情分析建议。
                </div>
                <div class="feature-stats">
                    <span>对话次数: {{ stats.chatCount }}</span>
                    <span>满意度: {{ stats.satisfaction }}</span>
                </div>
            </div>
        </div>

        <!-- 图表展示 -->
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;">
            <div class="chart-container">
                <h3 class="chart-title">舆情趋势</h3>
                <div id="trendChart" class="chart-wrapper"></div>
            </div>
            <div class="chart-container">
                <h3 class="chart-title">情感分布</h3>
                <div id="sentimentChart" class="chart-wrapper"></div>
            </div>
        </div>

        <!-- 最近动态 -->
        <div class="recent-news">
            <h3 class="chart-title">最近动态</h3>
            <div v-if="loading" class="loading">加载中...</div>
            <div v-else>
                <div class="news-item" v-for="news in recentNews" :key="news.id">
                    <div class="news-title" @click="viewNews(news)">
                        {{ news.title }}
                    </div>
                    <div class="news-meta">
                        <span>{{ news.time }}</span>
                        <span>{{ news.category }}</span>
                        <span>阅读: {{ news.readCount }}</span>
                        <span>评论: {{ news.commentCount }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入依赖 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="../lib/echarts/echarts.min.js"></script>
    <script src="../lib/layui/layui.js"></script>
    <script src="../js/api.js"></script>
    
    <script>
        new Vue({
            el: '#app',
            data: {
                stats: {
                    totalArticles: 0,
                    totalComments: 0,
                    totalHotWords: 0,
                    avgSentiment: 0,
                    todayHotWords: 0,
                    lastUpdate: '',
                    platformCount: 0,
                    platformActivity: '',
                    analyzedArticles: 0,
                    analysisAccuracy: '',
                    regionCount: 0,
                    activeIPs: 0,
                    commentCount: 0,
                    sentimentAccuracy: '',
                    riskEvents: 0,
                    warningAccuracy: '',
                    wordCount: 0,
                    updateFrequency: '',
                    chatCount: 0,
                    satisfaction: ''
                },
                recentNews: [],
                trendChart: null,
                sentimentChart: null,
                loading: false
            },
            mounted() {
                this.initCharts();
                this.loadData();
            },
            methods: {
                // 初始化图表
                initCharts() {
                    this.trendChart = echarts.init(document.getElementById('trendChart'));
                    this.sentimentChart = echarts.init(document.getElementById('sentimentChart'));
                },

                // 加载数据
                async loadData() {
                    try {
                        this.loading = true;
                        
                        // 加载统计数据
                        await this.loadStats();
                        
                        // 加载最近动态
                        await this.loadRecentNews();
                        
                        // 加载图表数据
                        await this.loadChartData();
                        
                    } catch (error) {
                        console.error('加载数据失败:', error);
                        layui.use('layer', () => {
                            layui.layer.msg('加载数据失败', {icon: 2});
                        });
                    } finally {
                        this.loading = false;
                    }
                },

                // 加载统计数据
                async loadStats() {
                    try {
                        // 这里可以调用实际的API
                        // const response = await API.opinion.getDashboardStats();
                        // this.stats = response;
                        
                        // 使用模拟数据
                        this.stats = {
                            totalArticles: 1250,
                            totalComments: 8560,
                            totalHotWords: 156,
                            avgSentiment: 0.42,
                            todayHotWords: 25,
                            lastUpdate: '2024-01-15 16:30',
                            platformCount: 6,
                            platformActivity: '高',
                            analyzedArticles: 1200,
                            analysisAccuracy: '95%',
                            regionCount: 32,
                            activeIPs: 8500,
                            commentCount: 8560,
                            sentimentAccuracy: '92%',
                            riskEvents: 3,
                            warningAccuracy: '88%',
                            wordCount: 3200,
                            updateFrequency: '实时',
                            chatCount: 156,
                            satisfaction: '96%'
                        };
                    } catch (error) {
                        console.error('加载统计数据失败:', error);
                    }
                },

                // 加载最近动态
                async loadRecentNews() {
                    try {
                        // 这里可以调用实际的API
                        // const response = await API.opinion.getRecentNews();
                        // this.recentNews = response;
                        
                        // 使用模拟数据
                        this.recentNews = [
                            {
                                id: 1,
                                title: '人工智能技术发展引发广泛讨论，专家呼吁加强伦理规范',
                                time: '2024-01-15 16:00',
                                category: '科技',
                                readCount: 15000,
                                commentCount: 320
                            },
                            {
                                id: 2,
                                title: '新能源汽车市场持续增长，充电基础设施建设成为关注焦点',
                                time: '2024-01-15 15:30',
                                category: '汽车',
                                readCount: 12000,
                                commentCount: 280
                            },
                            {
                                id: 3,
                                title: '互联网行业裁员潮持续，专家分析行业转型趋势',
                                time: '2024-01-15 15:00',
                                category: '社会',
                                readCount: 18000,
                                commentCount: 450
                            },
                            {
                                id: 4,
                                title: '教育数字化转型加速，在线教育质量引发热议',
                                time: '2024-01-15 14:30',
                                category: '教育',
                                readCount: 8500,
                                commentCount: 180
                            },
                            {
                                id: 5,
                                title: '医疗科技创新成果显著，AI辅助诊断技术获得认可',
                                time: '2024-01-15 14:00',
                                category: '医疗',
                                readCount: 9500,
                                commentCount: 220
                            }
                        ];
                    } catch (error) {
                        console.error('加载最近动态失败:', error);
                    }
                },

                // 加载图表数据
                async loadChartData() {
                    try {
                        // 这里可以调用实际的API
                        // const response = await API.opinion.getDashboardCharts();
                        // this.updateCharts(response);
                        
                        // 使用模拟数据
                        this.updateCharts(this.getMockChartData());
                    } catch (error) {
                        console.error('加载图表数据失败:', error);
                    }
                },

                // 更新图表
                updateCharts(data) {
                    this.updateTrendChart(data);
                    this.updateSentimentChart(data);
                },

                // 更新趋势图表
                updateTrendChart(data) {
                    const option = {
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['文章数', '评论数', '热词数']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '文章数',
                                type: 'line',
                                data: [120, 132, 101, 134, 90, 230, 210]
                            },
                            {
                                name: '评论数',
                                type: 'line',
                                data: [220, 182, 191, 234, 290, 330, 310]
                            },
                            {
                                name: '热词数',
                                type: 'line',
                                data: [150, 232, 201, 154, 190, 330, 410]
                            }
                        ]
                    };
                    this.trendChart.setOption(option);
                },

                // 更新情感分布图表
                updateSentimentChart(data) {
                    const option = {
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b}: {c} ({d}%)'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left'
                        },
                        series: [
                            {
                                name: '情感分布',
                                type: 'pie',
                                radius: '50%',
                                data: [
                                    { value: 45, name: '正面', itemStyle: { color: '#52c41a' } },
                                    { value: 35, name: '中性', itemStyle: { color: '#faad14' } },
                                    { value: 20, name: '负面', itemStyle: { color: '#ff4d4f' } }
                                ],
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    this.sentimentChart.setOption(option);
                },

                // 获取模拟图表数据
                getMockChartData() {
                    return {
                        trendData: {
                            dates: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                            articles: [120, 132, 101, 134, 90, 230, 210],
                            comments: [220, 182, 191, 234, 290, 330, 310],
                            hotWords: [150, 232, 201, 154, 190, 330, 410]
                        },
                        sentimentData: {
                            positive: 45,
                            neutral: 35,
                            negative: 20
                        }
                    };
                },

                // 导航到功能页面
                navigateTo(feature) {
                    const routes = {
                        'hot-words': 'pages/hotwords.html',
                        'platform-stats': 'pages/platform.html',
                        'article-analysis': 'pages/articles.html',
                        'ip-analysis': 'pages/ip.html',
                        'comment-analysis': 'pages/comments.html',
                        'opinion-analysis': 'pages/opinion.html',
                        'word-cloud': 'pages/wordcloud.html',
                        'ai-chat': 'pages/ai-chat.html'
                    };
                    
                    if (routes[feature]) {
                        window.location.href = routes[feature];
                    }
                },

                // 查看新闻详情
                viewNews(news) {
                    layui.use('layer', () => {
                        layui.layer.open({
                            type: 1,
                            title: news.title,
                            area: ['800px', '600px'],
                            content: `
                                <div style="padding: 20px;">
                                    <h3>${news.title}</h3>
                                    <p><strong>时间:</strong> ${news.time}</p>
                                    <p><strong>分类:</strong> ${news.category}</p>
                                    <p><strong>阅读量:</strong> ${news.readCount}</p>
                                    <p><strong>评论数:</strong> ${news.commentCount}</p>
                                    <p><strong>摘要:</strong> 这是一条关于${news.category}的新闻动态，反映了当前社会对该领域的关注和讨论...</p>
                                </div>
                            `
                        });
                    });
                }
            }
        });

        // 响应式处理
        window.addEventListener('resize', () => {
            const app = document.querySelector('#app').__vue__;
            if (app.trendChart) app.trendChart.resize();
            if (app.sentimentChart) app.sentimentChart.resize();
        });
    </script>
</body>
</html> 